<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图书在线借阅系统 | 登录页面</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
    <link rel="shortcut icon" href="#">
    <script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/js/jquery-3.4.1.js"></script>
    <script>
        $(function (){

            $("#code").click(function (){
                //3.设置图片的src属性，注意需要添加随机数
                $(this).prop("src","code.let?id="+Math.random());
            });
        });
    </script>
</head>
<body>

<!-- 顶部部分 -->
<div class="layui-fluid" style="height: 41px; background-image: url(lib/Images/login_top_bg.gif);">

</div>
<!-- 中间部分 -->
<div class="layui-fluid" style="background-image: linear-gradient(gainsboro, white,white,white,white,white,gainsboro); height: 532px;">
    <div class="layui-col-md6" style="background-image: linear-gradient(gainsboro, white,white,white,white,white,gainsboro); height: 532px;position:relative;">
        <div style="position: absolute;margin-top: 30px;margin-left:2px;">
            <img src="lib/Images/book.jpg" />&nbsp;<a href="javascript:void(0)"></a>
        </div>
    </div>
    <div class="layui-col-md6" style=" height: 532px; position: relative;">
        <h1 style="font-weight: bold; font-style: unset;position: absolute; margin-top: 80px; margin-left: 230px;">图书在线借阅系统</h1>
        <table  height="100%">

            <tr height="30%"><td colspan="3">&nbsp;</td></tr>
            <tr>
                <td width="30%" rowspan="5">&nbsp;</td>
                <td valign="top" id="form">
                    <form class="layui-form" method="post" action="member.let?type=login">
                        <div class="layui-form-item">
                            <label class="layui-form-label"style="font-weight:bold; font-size: 20px;">卡&nbsp;&nbsp;&nbsp;号：</label>
                            <div class="layui-input-block">
                                <input type="text" style="width: 200px;" value="${member.id}" name="id" required  lay-verify="required" placeholder="请输入卡号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="font-weight:bold; font-size: 20px;">密&nbsp;&nbsp;&nbsp;码：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="password" style="width: 120px;" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="position: relative;width: 80px;height: 30px;">
                                <div style="width: 80px;height: 30px; position: relative; margin-left: 6px; margin-top: -2px; ">
                                    <a href="forget_pwd.jsp" style="color: #01AAED;">忘记密码？</a>
                                </div>
                            </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="font-weight:bold; font-size: 20px;">验证码：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" style="width: 120px;" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"  style="position: relative;width: 80px;height: 30px;">
                               <div style="width: 80px;height: 30px; position: relative; margin-top: -5px; "  >
                                   <img id ="code" src="code.let"/>
                               </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label" style="font-weight:bold; font-size: 20px;">身&nbsp;&nbsp;&nbsp;份：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="power" value="2" title="用户">
                                <input type="radio" name="power" value="1" title="管理员" checked>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input class="layui-btn layui-btn-radius" type="submit" value="登录" id="Btn"/>
                                <button type="reset" style="width: 80px;" class="layui-btn layui-btn-radius"><a href="member.let?type=registerpre" style="color: white">注册</a></button>
                            </div>
                        </div>

                        </div>
                    </form>
                </td>
                <td rowspan="5">&nbsp;</td>

            </tr>
            <tr><td colspan="3">&nbsp;</td></tr>
        </table>
    </div>
</div>
<!-- 底部部分 -->
<div class="layui-fluid" style="background-color:  #009F95; height: 62px; position: relative;">
    <p align="center;"style="position: absolute;margin-top: 25px;margin-left: 40%;">Copyright © 2022Soar628</p>
</div>

<script src="lib/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(Btn)', function(data){
            console.log(JSON.stringify(data.field));
           // console.log(data);
            //layer.alert(JSON.stringify(data.field));
            //layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>
